<script setup lang="ts">
defineOptions({
  name: "VueSwiper"
});
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper-bundle.css";
import useVueSwiper from "./hooks/useVueSwiper";
import useVueTabs from "../VueTabs/hooks/useVueTabs";
import VueScrollTo from "vue-scrollto";
const { tabList, activeName, duration: speed } = useVueTabs(false);
const { swiperRef, allowSlidePrev, allowSlideNext, set_slide_state, onSwiper } =
  useVueSwiper();
const onSlideChange = (swiper: any) => {
  activeName.value = swiper.activeIndex;
  VueScrollTo.scrollTo("html", 0);
  set_slide_state(swiper);
  set_app_title(tabList.value[swiper.activeIndex].title);
};
defineExpose({
  swiperRef
});
</script>
<template>
  <swiper
    :slides-per-view="1"
    :space-between="50"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
    :initialSlide="activeName"
    :speed="speed"
    :loop="false"
    :allow-touch-move="true"
    :allowSlidePrev="allowSlidePrev"
    :allowSlideNext="allowSlideNext"
    :autoplay="false"
    :pagination="undefined"
  >
    <swiper-slide v-for="(item, index) in tabList" :key="index">
      <VueContainer
        v-if="activeName === index"
        v-model:activeName="activeName"
        :item="item"
      />
    </swiper-slide>
  </swiper>
</template>
<style lang="less" scoped></style>
